<template>
	<view>
		<view id="body">
			<!-- 搜索框 -->
			<view id="lookfor">
				<input id="print" type="text" @input="get" />
				<button @click="search">搜索</button>
			</view>
			<!-- 首页banner图 -->
			<view id="banner">
				<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000"
					:duration="1000">
					<swiper-item v-for="(item, index) in banner">						
							<image :src="item.sysContent+'?a'" width='100%'></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="showgoods">
				<view v-for="(item,index) in showGoods" @click="getDetails(item.goodsId)" >
					{{item.goodsName}}
					<!-- <image :src="item.goodsImg"></image> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			if (!uni.getStorageSync("token")) {
				uni.reLaunch({
					url: "../login/login",
				})
			}
			this.getBanners()
			//获取用户身体信息
			this.getUserBody()
			//获取商品信息
			this.getGoods()
		},
		data() {
			return {
				banner: [],
				keyword: "",
				goods: [],
				showGoods: [],
				page: {
					page: 0,
					limit: 5,
				},
				userBody:null
			}
		},
		methods: {
			//获取首页banner图
			getBanners() {
				this.$req.getBanners().then(res => {
					this.banner = res.data
				})
			},
			get(e) {
				this.keyword = e.target.value
			},
			search() {
				uni.navigateTo({
					url:"../market/search/search?key=" + this.keyword
				})
			},
			getGoods() {
				this.$req.getGoods(this.page).then(res => {
					this.showGoods = res.data.content
				})
			},
			getUserBody(){
				this.$req.getUserInfo().then(res=>{
					this.userBody  =res
				})
			},
			getDetails(id){
				uni.navigateTo({
					url:"../market/goodsDetails?goodsId="+id
				})
			}
		}
	}
</script>

<style>
	#body {
		width: 97%;
		margin-top: 2rpx;
		margin-left: 1%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border: 1px solid red;

	}

	#banner {
		width: 90%;
	}

	#lookfor {
		width: 90%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#print {
		border: 1rpx solid #8F8F94;
		width: 500rpx;
		border-radius: 20rpx;

	}
</style>
